<template>
  <view class="home-page">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="header-content">
        <view class="logo">
          <image src="../../static/healthLogo.png" class="logo-icon"></image>
          <text class="logo-text">智能健康管家</text>
        </view>
      </view>
    </view>

    <!-- 欢迎卡片 -->
    <view class="welcome-card">
      <view class="welcome-content">
        <text class="welcome-title">欢迎回来！</text>
        <text class="welcome-subtitle">今天也要保持健康的生活方式哦 💪</text>
      </view>
    </view>

    <!-- 快捷功能 -->
    <view class="section">
      <text class="section-title">快捷功能</text>
      <view class="actions-grid">
        <view 
          v-for="action in quickActions" 
          :key="action.id"
          class="action-card"
          @tap="navigateToPage(action.path)"
        >
          <view class="action-icon" :class="action.color">
            <text class="action-emoji">{{ action.emoji }}</text>
          </view>
          <text class="action-title">{{ action.title }}</text>
          <text class="action-subtitle">{{ action.subtitle }}</text>
        </view>
      </view>
    </view>

    <!-- 健康小贴士 -->
    <view class="section">
      <text class="section-title">健康小贴士</text>
      <view class="tips-card">
        <view class="tip-indicator"></view>
        <view class="tip-content">
          <text class="tip-title">多喝水的重要性</text>
          <text class="tip-text">每天建议饮水量为8杯水（约2升），有助于维持身体正常代谢和排毒功能。</text>
          <view class="tip-tag">
            <text class="tag-text">营养建议</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 快捷功能数据
const quickActions = ref([
  {
    id: 'chat',
    title: 'AI健康咨询',
    subtitle: '专业健康问答',
    emoji: '💬',
    color: 'blue',
    path: 'pages/chat/chat'
  },
  {
    id: 'food',
    title: '食物识别',
    subtitle: '营养成分分析',
    emoji: '📷',
    color: 'green',
    path: 'pages/food/food'
  },
  {
    id: 'medicine',
    title: '药品识别',
    subtitle: '用药信息查询',
    emoji: '💊',
    color: 'purple',
    path: 'pages/medicine/medicine'
  },
  {
    id: 'analytics',
    title: '健康分析',
    subtitle: '数据趋势报告',
    emoji: '📊',
    color: 'orange',
    path: 'pages/analytics/analytics'
  }
])

const navigateToPage = (path) => {
  console.log('准备跳转到:', path)

  if (!path) {
    wx.showToast({
      title: '无效的跳转路径',
      icon: 'none'
    })
    return
  }

  const registeredPages = [
    'pages/index/index',
    'pages/chat/chat',
    'pages/food/food',
    'pages/medicine/medicine',
    'pages/analytics/analytics'
  ]

  console.log("已注册的页面路径:", registeredPages)

  const normalizedPath = path.replace(/^\//, '')

  const pageExists = registeredPages.includes(normalizedPath)
  console.log("路径匹配结果:", pageExists)

  if (!pageExists) {
    wx.showToast({
      title: '页面未注册，请检查 pages.json',
      icon: 'none',
      duration: 2000
    })
    return
  }

  const tabBarPages = [
    'pages/index/index',
    'pages/chat/chat',
    'pages/medicine/medicine',
  ]

  if (tabBarPages.includes(normalizedPath)) {
    wx.switchTab({
      url: `/${normalizedPath}`,
      success() {
        console.log('TabBar跳转成功:', path)
      },
      fail(err) {
        console.error('TabBar跳转失败:', err)
        wx.showToast({
          title: 'TabBar跳转失败，请检查页面路径',
          icon: 'none',
          duration: 2000
        })
      }
    })
  } else {
    wx.navigateTo({
      url: `/${normalizedPath}`,
      success() {
        console.log('跳转成功:', path)
      },
      fail(err) {
        console.error('跳转失败:', err)
        wx.showToast({
          title: '跳转失败，请检查页面路径',
          icon: 'none',
          duration: 2000
        })
      }
    })
  }
}
</script>

<style scoped>
.home-page {
  min-height: 100vh;
  background: linear-gradient(to bottom, #f0fdf4, #dbeafe);
  padding: 32rpx;
}

/* 头部样式 */
.header {
  background: white;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  border-radius: 24rpx;
  margin-bottom: 32rpx;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
}

.logo {
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.logo-icon {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 28rpx;
}

.logo-text {
  font-size: 36rpx;
  font-weight: 600;
  color: #1f2937;
}

/* 欢迎卡片 */
.welcome-card {
  background: linear-gradient(135deg, #10b981, #3b82f6);
  border-radius: 24rpx;
  color: white;
  margin-bottom: 48rpx;
}

.welcome-content {
  padding: 48rpx;
}

.welcome-title {
  font-size: 40rpx;
  font-weight: 600;
  display: block;
  margin-bottom: 16rpx;
}

.welcome-subtitle {
  opacity: 0.9;
  display: block;
  font-size: 28rpx;
}

/* 通用样式 */
.section {
  margin-bottom: 48rpx;
}

.section-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #1f2937;
  display: block;
  margin-bottom: 24rpx;
}

/* 快捷功能 */
.actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
}

.action-card {
  background: white;
  border-radius: 24rpx;
  padding: 32rpx;
  text-align: center;
  transition: all 0.2s;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.action-card:active {
  transform: scale(0.98);
  box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.15);
}

.action-icon {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16rpx;
}

.action-icon.blue {
  background: #dbeafe;
}

.action-icon.green {
  background: #dcfce7;
}

.action-icon.purple {
  background: #f3e8ff;
}

.action-icon.orange {
  background: #fed7aa;
}

.action-emoji {
  font-size: 48rpx;
}

.action-title {
  font-weight: 500;
  color: #1f2937;
  display: block;
  margin-bottom: 8rpx;
  font-size: 28rpx;
}

.action-subtitle {
  font-size: 24rpx;
  color: #6b7280;
  display: block;
}

/* 健康小贴士 */
.tips-card {
  background: white;
  border-radius: 24rpx;
  padding: 32rpx;
  display: flex;
  gap: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.tip-indicator {
  width: 16rpx;
  height: 16rpx;
  background: #10b981;
  border-radius: 50%;
  margin-top: 16rpx;
  flex-shrink: 0;
}

.tip-content {
  flex: 1;
}

.tip-title {
  font-weight: 500;
  color: #1f2937;
  display: block;
  margin-bottom: 8rpx;
  font-size: 28rpx;
}

.tip-text {
  font-size: 28rpx;
  color: #6b7280;
  line-height: 1.6;
  display: block;
  margin-bottom: 16rpx;
}

.tip-tag {
  background: #f3f4f6;
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
  display: inline-block;
}

.tag-text {
  color: #6b7280;
  font-size: 24rpx;
}
</style>
